<template>
  <div class="app-container">
    <el-tabs v-model="curTab" tab-position="left">
      <el-tab-pane label="基本设置">
        <div v-if="curTab == 0" style="width: 500px">
          <el-form ref="ruleForm" size="small" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="手机" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="备注" prop="memo">
              <el-input v-model="form.memo" type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入" />
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button :loading="loading" type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="修改密码">
        <div v-if="curTab == 1" style="width: 500px">
          <el-form ref="ruleForm" size="small" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" type="password" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
              <el-input v-model="form.password2" type="password" placeholder="请输入" />
            </el-form-item>
          </el-form>
          <div style="text-align: right">
            <el-button :loading="loading" type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import * as userApi from '@/api/user'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'id',
      'userInfo'
    ])
  },
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      curTab: '0',
      form: {},
      rules: {
        username: [
          { required: true, message: '请输入', trigger: 'blur' },
          { max: 30, message: '长度在30个字符以内', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在6到30个字符', trigger: 'change' }
        ],
        password2: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        phone: [{ max: 20, message: '长度在20个字符以内', trigger: 'change' }],
        email: [{ max: 30, message: '长度在30个字符以内', trigger: 'change' }],
        memo: [{ max: 150, message: '长度在150个字符以内', trigger: 'change' }]
      }
    }
  },
  watch: {
    curTab() {
      this.initForm()
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    initForm() {
      this.form = {
        id: this.id,
        username: this.userInfo.name,
        phone: this.userInfo.phone,
        email: this.userInfo.email,
        memo: this.userInfo.memo,
        password: '##thy##password'
      }
    },
    submitForm(formName) {
      const submitAction = async(toLogin) => {
        const data = { ...this.form }
        delete data.password2
        this.loading = true
        try {
          await userApi.update(data)
        } catch (e) {
          console.log(e)
        } finally {
          this.loading = false
        }
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        if (toLogin) {
          this.$store.dispatch('user/logout')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        } else {
          this.$store.dispatch('user/getInfo')
        }
      }
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          if ((this.form.username !== this.userInfo.name) || this.form.password !== '##thy##password') {
            this.$confirm('修改名称和密码需要重新登录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              submitAction(true)
            })
          } else {
            submitAction(false)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
